<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		ul{
			display: flex;
			flex-direction: row;
			width: 60%;
			margin: 0 auto;
		}
		li{
			display:flex;
			flex:1;
			justify-content: center;
			align-content: center;
			background: #00CDCD;
			color: #fff;
			height: 40px;
			line-height: 40px;
			cursor: pointer;
		}
		.limid{
			border-right: 1px solid #fff;
			border-left:  1px solid #fff;
		}
		#main{
			width: 60%;
			margin: 0 auto;
			border-top: 1px solid #fff;
			height: 200px;
		}
		.active{
			background: #FF7F00;
		}
		#main .show{
			display:block;
		}
		.sub{
			height: 100%;
			display:none;
			background: #00CDCD;
			color: #fff;
			text-align: center;
		}
	</style>
</head>
<body>
	<ul>
		<li class="active">第一</li>
		<li class="limid">第二</li>
		<li>第三</li>
	</ul>

	<div id="main">
		<div class="show sub">第一个</div>
		<div class="sub">第二个</div>
		<div class="sub">第三个</div>
	</div>
</body>
<script src='jquery-1.11.3.min.js'></script>
<script type="text/javascript">
	//原生js
	// var lis=document.getElementsByTagName("li");
	// var subbox=main.getElementsByTagName("div");
	// for(var i=0;i<lis.length;i++){
	// 		lis[i].id='litem'+i;
	// 		lis[i].onclick=changeTab;
	// 	}
	// function changeTab(){
	// 	for(var i=0;i<lis.length;i++){
	// 		lis[i].classList.remove('active');
	// 		subbox[i].classList.remove('show')
	// 	}
	// 	this.classList.add('active');
	// 	subbox[this.id.match(/\d+/g)].classList.add('show')
	// }

	//JQuery.noConflict();
	$('li').click(function(){
		$(this).addClass('active').siblings().removeClass('active');
		$($('.sub')[$(this).index()]).addClass('show').siblings().removeClass('show');
	})



	//jquery 
	// next() prev() siblings() append prepend after before 
	// addclass attr hasclass removeclass 
	// 自定义jquery插件 
	// 1. $.extend({fn:function(){}) 把插件封装到$对象上
	// 2. $.fn.extend({fn:function(){}}) 把插件封装到原型上
	// $(function(){
	// 
	// })
	// 
	// js
	// var a = document.getElementByIdx_x_x("dom");
	// jsCopy(a);//调用清理空格的函数
	// var b = a.childNodes;//获取a的全部子节点；children
	// var c = a.parentNode;//获取a的父节点；
	// var d = a.nextSibling;//获取a的下一个兄弟节点
	// var e = a.previousSibling;//获取a的上一个兄弟节点 previousElementSibling
	// var f = a.firstChild;//获取a的第一个子节点 firstElementChild
	// var g = a.lastChild;//获取a的最后一个子节点 lastElementChild
	// 
			// 前端跨域 
			// 1.jsonp 利用动态脚本的src属性 向服务器发送一个带回调函数的参数http://www.b.com/getdata?callback=demo //服务器会用这个参数值包装要返回的数据 
			//  demo({msg: 'helloworld'});页面上在通过demo这个函数 参数就是传递的数据
			//  2.修改document.domain(获取服务器主机名) //3.通过window.name传递数据（一个窗口生命周期内会共用一个window.name）
			// 4. 通过window.postmessage 跨域 接受weindow.onmessage
			// 5.$.ajax({
					 // url: 'http://www.b.com/getdata?callback=?', //不指定回调名，可省略callback参数，会由jQuery自动生成
					 // dataType: 'jsonp',
					 // jsonpCallback: 'demo', //可省略
					 // success: function(data) {
					 //   console.log(data.msg);
					 // }
					// });
		
			//服务器跨域
			//反向代理和cors
			//所谓同步，就是发出一个功能调用时，在没有得到结果之前，该调用就不返回或继续执行后续操作。
			//当一个异步过程调用发出后，调用者在没有得到结果之前，就可以继续执行后续操作
			//同步和异步的区别：请求发出后，是否需要等待结果，才能继续执行其他操作。

			//ajax
			//4 //创建xmlhttp对象
			 // if (window.XMLHttpRequest){
			 //     xmlhttp=new XMLHttpRequest(); 
			 // }
			 // else {
			 //     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			 // }


			// function createRequest(){
			// xmlhttp.onreadystatechange=callbacksuccess    //回调函数
			// xmlhttp.open('post',url,true(是否异步));     //发送ajax
			// xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			// xmlhttp.send(data);  //get时data为null
			// }
			// function callbacksuccess()
			// {
			//   if (xmlhttp.readyState==4 && xmlhttp.status==200)
			//      {
			//         // 成功后执行的代码
			//         documrnt.getElementById("textarea").value = xmlhttp.responseText;  //服务器返回数据为xmlhttp.responseText
			//      }
			// }
</script>
</html>